<template>
  <div id="left2" style="width: 100%; height: 100%"></div>
</template>

<script>
// 引入图表
import { Pie } from "@antv/g2plot";
// 引入get请求
import { get } from "@/utils/request";
export default {
  data() {
    return {
      pieData: [],
    }
  },
  async mounted() {
    await this.getDevData();
    await this.initLeft2();
  },
  methods: {
    // 创建对应图表
    initLeft2() {
      

      const piePlot = new Pie("left2", {
        appendPadding: 10,
        data: this.pieData,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        label: {
          type: "inner",
          offset: "-30%",
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: "center",
          },
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    },
    async getDevData() {
      let res = await get("/dashboard/queryDeviceOnlineNumber");
      // console.log(res);
      this.pieData=res.data
    },
  },
};
</script>

<style scoped>
</style>